<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件深入</title>
    <script src="../jquery.min.js"></script>
    <script src="../vue.js"></script>
</head>
<body>
<!--冒泡事件和默认事件-->
    <div id="box" @click="show2()">
        <input type="button" value="按钮" @click.stop="show()">
        <input type="button" value="按钮阻止默认行为" @contextmenu.stop.prevent="show()">
    </div>
    <!--键盘事件-->
    <div id="box1">
        <input type="text" value="" @keydown.up="show($event)">
    </div>
    <script>
        window.onload = function () {
            new Vue({
                el:"#box",
                data:{},
                methods:{
                    show:function (ev) {
                        alert(1);
//                        ev.cancelBubble = true;//阻止事件冒泡
//                        ev.preventDefault();阻止默认行为
                    },
                    show2:function () {
                        alert(9)
                    },
                    show3:function (ev) {
                        alert(5)
                    }
                }
            });

            new Vue({
                el:"#box1",
                data:{},
                methods:{
                    show:function (ev) {
//                        alert(ev.keyCode)
                        /*if(ev.keyCode == 13){
                            alert('您按了回车了')
                        }*/
                        alert('您按了回车了')
                    }
                }
            })
        }

    </script>
</body>
</html>